import { jsx as _jsx } from "react/jsx-runtime";
import React from "react";
import classNames from "classnames";
/**
 * ~~~js
 * 默认二封增强树组件
 * ~~~~
 */
export default function DevToolBarDefaultHoc(WrappedComponent) {
    // 泛型限定
    return class extends WrappedComponent {
        parent = super.render();
        defaultConfig = {};
        toolBarRef;
        get tooBarInstance() {
            return this.toolBarRef.current.instance;
        }
        constructor(...props) {
            super(...props);
            this.toolBarRef = React.createRef();
            this.renderItem = this.renderItem.bind(this);
            this.renderMenuItem = this.renderMenuItem.bind(this);
            this.setupResizeObserver = this.setupResizeObserver.bind(this);
            this.cleanupResizeObserver = this.cleanupResizeObserver.bind(this);
            this.targetRef = React.createRef();
            this.resizeObserver = null;
            this.state = {
                key: new Date().getTime(),
                width: 0,
            };
        }
        componentDidMount() {
            console.log("加载事件");
            // 模拟dom加载完成
            setTimeout(() => {
                this.setupResizeObserver();
            }, 300);
        }
        componentDidUpdate() {
            this.setupResizeObserver();
        }
        componentWillUnmount() {
            console.log("卸载事件");
            if (this.tooBarInstance) {
                this.tooBarInstance.dispose();
            }
            this.cleanupResizeObserver();
        }
        renderItem(data) {
            return _jsx("b", { style: { color: "green" }, children: data.text || "defalut" });
        }
        renderMenuItem(data) {
            return _jsx("b", { style: { fontStyle: "italic" }, children: data.text });
        }
        setupResizeObserver() {
            // this.targetRef.current = this.props.parentRef.current || null;
            if (this.toolBarRef.current) {
                this.cleanupResizeObserver();
                this.targetRef.current =
                    this.toolBarRef.current?._element?.parentNode || null;
                if (this.targetRef.current) {
                    this.resizeObserver = new ResizeObserver((entries) => {
                        for (const entry of entries) {
                            const cr = entry.contentRect;
                            this.setState({
                                width: cr.width,
                            });
                            // 调用实例上的这个方法
                            if (this.toolBarRef.current.instance) {
                                this.toolBarRef.current.instance?.updateDimensions();
                            }
                        }
                    });
                    this.resizeObserver.observe(this.targetRef.current);
                }
            }
        }
        cleanupResizeObserver() {
            if (this.resizeObserver && this.targetRef.current) {
                this.resizeObserver.unobserve(this.targetRef.current);
                this.targetRef.current = null;
                this.resizeObserver = null;
            }
        }
        render() {
            const klass = classNames("cpas-tool-bar");
            const { ...rest } = this.props;
            let props = {
                className: klass,
                ...this.defaultConfig,
                ...rest,
                // itemRender: this.renderItem,
                // menuItemRender: this.renderMenuItem,
                ref: this.toolBarRef,
            };
            return React.cloneElement(this.parent, { ...props });
        }
    };
}
